import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'react-router-dom'
import { Skeleton } from 'antd-mobile'
import { Toast } from 'antd-mobile'
import { ExclamationOutline } from 'antd-mobile-icons'

// eslint-disable-next-line react/display-name
export default (Com: React.FC<{ uuid: string }>) => (props: any) => {
  const [searchParams] = useSearchParams()
  const [uuid, setUuid] = useState('')

  useEffect(() => {
    const uuid = searchParams.get('uuid')
    setUuid(uuid || '')
    if (!uuid) {
      Toast.show({ icon: <ExclamationOutline />, content: '活动链接无效', duration: 0 })
    }
  }, [])

  return (
    <>
      {uuid ? (
        <Com {...{ ...props, uuid }} />
      ) : (
        <>
          <Skeleton.Title animated style={{ height: '30px' }} />
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <br></br>
          <Skeleton.Title animated style={{ height: '30px' }} />
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '60%' }} />
          <br></br>
          <br></br>
          <Skeleton.Title animated style={{ height: '30px' }} />
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
          <Skeleton animated style={{ height: '30px', width: '100%' }} />
          <br></br>
        </>
      )}
    </>
  )
}
